/**
* 设置质量审核评估内容模板
*/
<template>
    <vp-dialog :span="2" ref="editDialogRef">
        <template #title><vp-label :zh="zh" :en="en"/></template>
        <el-form v-loading="loading" :model="formData" :scroll-to-error="true">
            <vp-table ref="tableRef" :data="formData.items">
                <el-table-column  type="index" align="center" label="#"></el-table-column>
                <el-table-column  prop="bh" min-width="200" show-overflow-tooltip >
                    <template #header><vp-label zh="类型编码" en="Code"/></template>
                    <template #default="scope">
                        <el-form-item :prop="`items[${scope.$index}].bh`" :rules="[validateUtils.notNull]" label-width="auto" v-if="type == 'edit'">
                            <el-input maxlength="10" v-model="scope.row.bh" :disabled="scope.row.id" v-trim></el-input>
                        </el-form-item>
                        <span v-else >{{scope.row.bh}}</span>
                    </template>
                </el-table-column>
                <el-table-column  prop="lxZh" min-width="200" show-overflow-tooltip >
                    <template #header><vp-label zh="通告类型-中文" en="Notice Type - Chinese"/></template>
                    <template #default="scope">
                        <el-form-item :prop="`items[${scope.$index}].lxZh`" :rules="[validateUtils.notNull]" label-width="auto" v-if="type == 'edit'">
                            <el-input maxlength="100" v-model="scope.row.lxZh" v-trim></el-input>
                        </el-form-item>
                        <span v-else >{{scope.row.lxZh}}</span>
                    </template>
                </el-table-column>
                <el-table-column  prop="lxEn" min-width="200" show-overflow-tooltip >
                    <template #header><vp-label zh="通告类型-英文" en="Notice Type - English"/></template>
                    <template #default="scope">
                        <el-form-item :prop="`items[${scope.$index}].lxEn`" :rules="[validateUtils.notNull]" label-width="auto" v-if="type == 'edit'">
                            <el-input maxlength="100" v-model="scope.row.lxEn" v-trim></el-input>
                        </el-form-item>
                        <span v-else >{{scope.row.lxEn}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="100" v-if="type == 'edit'">
                    <template #header>
                        <el-button circle @click="handleAddRow()"><SvgIcon name="ele-Plus"></SvgIcon></el-button>
                    </template>
                    <template #default="scope">
                        <el-button circle @click="handleDeleteRow(scope.$index)"><SvgIcon name="ele-Minus"></SvgIcon></el-button>
                    </template>
                </el-table-column>
            </vp-table>
        </el-form>
        <template #footer>
            <vp-btn-confirm :loading="saveLoading"  @click="handleSave"></vp-btn-confirm>
        </template>
    </vp-dialog>
</template>
<script setup lang="ts" name="engTechProjDevQAItemCustomTemplateList">
import { ref } from 'vue'
import request from '/@/utils/request';
import validateUtils from "/@/utils/validateUtils";
import { ElMessage } from 'element-plus';
import { UUID } from '/@/utils/uuid';

const editDialogRef = ref();
const formRef = ref();
const key = ref('');
const loading = ref(false);
const saveLoading = ref(false);
const zh = ref('');
const en = ref('');
const type = ref('edit');

const formData = ref({
    ckey:"",
    items: [] as any[],
});

const handleOpen = (param: any)=>{
    editDialogRef.value.handleOpen();
    key.value = param.key;
    zh.value = param.zh;
    en.value = param.en;
    type.value = param.type;
    loading.value = true;
    request.get('/basicData/customItem/list', {
        params: {
            items: [key.value],
        }
    }).then((res)=>{
        formData.value.items = [];
        if (res.data && res.data.length > 0) {
            const sznr = res.data[0].sznr;
            formData.value.items = (JSON.parse(sznr) || []);
        }
        loading.value = false;
    })
}

const handleSave = ()=>{
    if(loading.value){
        return;
    }
    if (formData.value.items.some((item: any) => 
        !item.bh || item.bh.trim() === "" || 
        !item.lxZh || item.lxZh.trim() === "" || 
        !item.lxEn || item.lxEn.trim() === "")) {
        ElMessage.error("请填写所有数据内容");
        return;
    }
    saveLoading.value = true;
    request.post("/basicData/customItem/save", {
        ckey: key.value,
        sznr: JSON.stringify((formData.value.items || []).map((obj:any, index: number) =>{
            return {
                ...obj,
                id: obj.id || UUID(),
                xc: (index+1)
            }
        }))
    }).then(()=>{
        editDialogRef.value.handleClose();
    }).catch(()=>{
    }).finally(()=>{
        saveLoading.value = false;
    })
}

const handleAddRow = ()=>{
    formData.value.items.push({
        bh: '',
        lxZh: '',
        lxEn: '',
    });
}

const handleDeleteRow = (index: number)=>{
    formData.value.items.splice(index, 1);
}

defineExpose({
    handleOpen,
})
</script>
